<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>客户详情</title>
  <link rel="stylesheet" href="css/public.css?v=1" />
</head>
<style>
  [v-cloak] {
    display: none !important;
  }
</style>

<body>
  <div class="w100 wrap" id="app" v-cloak>
    <div v-if="entry == 'single_chat_tools'">

      <div class="w100 todoList">
        <ul class="w100 tabs">
          <!-- <li class="tabItem" :class="checkeds == 4 ? 'active' : ''" @click="checkTab(4)"><span>客户详情</span></li>
          <li class="tabItem" :class="checkeds == 1 ? 'active' : ''" @click="checkTab(1)"><span>分配概况</span></li>
          <li class="tabItem" :class="checkeds == 2 ? 'active' : ''" @click="checkTab(2)"><span>跟进动态</span></li>
          <li class="tabItem" :class="checkeds == 3 ? 'active' : ''" @click="checkTab(3)"><span>客户动态</span></li> -->
        </ul>
        <div class="w100 list" :class="checkeds == 4 ? 'active' : ''" v-if="checkeds == 4">
          <div class="customer_show">
            <div class="p10 customer_info">
              <div class="w100 customer_info_l">
                <img :src="customerInfo.avatar" />
                <p>{{ customerInfo.name }}
                  <span class="c_mark" v-if="customerInfo.type == 1"> {{ customerInfo.type == 1 &&
                    customer_infos.remark_corp_name ? `@${ customer_infos.remark_corp_name }` : "@微信" }}</span>

                  <span class="c_mark" v-if="customerInfo.type == 2"> @{{ customerInfo.corp_name }}</span>
                </p>

              </div>
              <div class="w100 customer_info_r">
                <div class="cr_text"><span>客户姓名：</span><span>{{ customer_infos.remark || "--" }}</span></div>
                <div class="cr_text"><span>联系电话：</span><span>{{ customer_infos.remark_mobiles || "--" }}</span></div>
                <div class="cr_text"><span>备注描述：</span><span>{{ customer_infos.description || "--" }}</span></div>
                <div class="cr_text"><span>客户来源：</span><span>{{ customerInfo.follow_code_name || "--" }}</span></div>
              </div>
            </div>
            <!-- <div class="p10 customer_label">
              <p>标签：</p>
              <ul>
                <li v-for="item in customerInfo.tag" :key="item">{{ item }}</li>
                <li class="blue_btn" @click="addTag">打标签</li>
              </ul>
            </div> -->
            <div class="p10 customer_label">
              <ul>
                <button class="blue_btn w_btn" type="button">完善客户信息</button>
              </ul>
            </div>
            <div class="p10">
              <ul class="w100 customer_content">
                <li class="w50"><span>姓名</span><input class="w70" type="text" v-model="customer_edit.customname"></li>
                <li class="w50"><span>性别</span>
                  <select class="w70" v-model="customer_edit.sex">
                    <option value="男">男</option>
                    <option value="女">女</option>
                  </select>
                </li>
                <li class="w50"><span>手机号</span><input class="w70" type="number" v-model="customer_edit.mobile"></li>
                <li class="w50"><span>年龄</span><input class="w70" type="number" v-model="customer_edit.age"></li>
                <li class="w50"><span>额度</span><input class="w70" type="number" v-model="customer_edit.amount"></li>
                <li class="w50"><span>社保</span>
                  <select class="w70" v-model="customer_edit.insurance">
                    <option value="2">无</option>
                    <option value="1">有</option>
                  </select>
                </li>
                <li class="w50"><span>公积金</span>
                  <select class="w70" v-model="customer_edit.accumulationfund">
                    <option value="2">无</option>
                    <option value="1">有</option>
                  </select>
                </li>
                <li class="w50"><span>房</span>
                  <select class="w70" v-model="customer_edit.house">
                    <option value="2">无</option>
                    <option value="1">有</option>
                  </select>
                </li>
                <li class="w50"><span>车</span>
                  <select class="w70" v-model="customer_edit.car">
                    <option value="2">无</option>
                    <option value="1">有</option>
                  </select>
                </li>
                <li class="w50"><span>企业主</span>
                  <select class="w70" v-model="customer_edit.businesslicense">
                    <option value="2">否</option>
                    <option value="1">是</option>
                  </select>
                </li>
                <li class="w100"><span class="w135">备注</span>
                  <textarea cols="10" rows="5" class="j_textarea" v-model="customer_edit.remark"
                    placeholder="请输入跟进备注"></textarea>
                </li>
                <li class="w100">
                  <button type="button" class="t_btn" @click="push_sync">一键同步</button>
                </li>
              </ul>
            </div>
            <!-- <div class="p10" v-if="follows">
              <textarea cols="10" rows="5" class="j_textarea" v-model="followText" placeholder="请输入跟进内容"></textarea>
              <div class="w100 follow_btn">
                <button type="button" @click="addFollow">添加跟进</button>
                <button type="button" @click="follows = false">关闭</button>
              </div>
            </div> -->
          </div>
        </div>
        <div class="w100 list" :class="checkeds == 1 ? 'active' : ''" v-if="checkeds == 1">
          <table class="table" border="1">
            <thead>
              <th>所属员工</th>
              <th>客户来源</th>
              <th>添加时间</th>
              <th>更新时间</th>
            </thead>
            <tr>
              <td>{{ customerInfo.name }}</td>
              <td>
                {{ customerInfo.code || '未知来源' }}
                <!-- <span v-if="item.add_way == 0">未知来源</span>
                  <span v-else-if="item.add_way == 1">扫描二维码</span>
                  <span v-else-if="item.add_way == 2">搜索手机号</span>
                  <span v-else-if="item.add_way == 3">名片分享</span>
                  <span v-else-if="item.add_way == 4">群聊</span>
                  <span v-else-if="item.add_way == 5">手机通讯录</span>
                  <span v-else-if="item.add_way == 6">微信联系人</span>
                  <span v-else-if="item.add_way == 7"
                    >来自微信的添加好友申请</span
                  >
                  <span v-else-if="item.add_way == 8"
                    >安装第三方应用时自动添加的客服人员</span
                  >
                  <span v-else-if="item.add_way == 9">搜索邮箱</span>
                  <span v-else-if="item.add_way == 201">内部成员共享</span>
                  <span v-else-if="item.add_way == 202">管理员/负责人分配</span> -->
              </td>
              <td>{{ customerInfo.createtime }}</td>
              <td>{{ customerInfo.update_time }}</td>
            </tr>
          </table>
        </div>
        <div class="w100 list" :class="checkeds == 2 ? 'active' : ''" v-if="checkeds == 2">
          <div v-if="customerInfo.processList.length">
            <div class="track_box" v-for="(item,index) in customerInfo.processList">
              <div class="dayTime">
                <span v-if="index == 0 && transTime(0, item.create_time)">{{transTime(0, item.create_time)}}</span>
                <span
                  v-if="index != 0 && transTime(customerInfo.processList[index - 1].create_time, item.create_time)">{{transTime(customerInfo.processList[index
                  - 1].create_time, item.create_time)}}</span>
              </div>
              <div class="time">
                <span class="el-icon-paperclip"></span>
                <span>{{moment(item.create_time * 1000).format("HH:mm")}}</span>
              </div>
              <div class="context">
                <div class="inContext">
                  <div class="inTitle">{{ item.staff_name }}</div>
                  <div class="inText">
                    <div class="add">{{ item.content }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="w100 tac" v-else>
            暂无数据
          </div>
        </div>
        <div class="w100 list" :class="checkeds == 3 ? 'active' : ''" v-if="checkeds == 3">
          <div class="w100 nTabs">
            <li :class="checkedes == '' ? 'active' : ''" @click="checkTabs('')"><span>全部动态</span></li>
            <li :class="checkedes == 1 ? 'active' : ''" @click="checkTabs(1)"><span>标签动态</span></li>
            <li :class="checkedes == 3 ? 'active' : ''" @click="checkTabs(3)"><span>互动动态</span></li>
            <li :class="checkedes == 4 ? 'active' : ''" @click="checkTabs(4)"><span>客户动态</span></li>
          </div>
          <div v-if="customerInfo.customerInfoList.length">
            <div v-for="(item,index) in customerInfo.customerInfoList" class="track_box">
              <div class="dayTime">
                <span v-if="index == 0 && transTime(0, item.create_time)">{{transTime(0, item.create_time)}}</span>
                <span
                  v-if="index != 0 && transTime(customerInfo.customerInfoList[index - 1].create_time, item.create_time)">{{transTime(customerInfo.customerInfoList[index
                  - 1].create_time, item.create_time)}}</span>
              </div>
              <div class="time">
                <span class="el-icon-paperclip"></span>
                <span>{{moment(item.create_time * 1000).format("HH:mm")}}</span>
              </div>
              <div class="context">
                <div class="inContext" v-if="item.type == 1">
                  <div class="inTitle">标签动态</div>
                  <div class="inText">
                    <div class="add" v-if="item.content.add_tag.length > 0">{{item.staff_name}} 给 &nbsp
                      {{item.customer_name}} 添加了标签{{item.content.add_tag}}</div>
                    <div class="close" v-if="item.content.remove_tag.length > 0">{{item.staff_name}} 取消了 &nbsp
                      {{item.customer_name}} 的标签{{item.content.remove_tag}}</div>
                  </div>
                </div>
                <div class="inContext" v-if="item.type == 2">
                  <div class="inTitle">跟进记录</div>
                  <div class="inTitle">{{ item.staff_name }}</div>
                  <div class="inText">
                    <div class="add">{{ item.content }}</div>
                  </div>
                </div>
                <div class="inContext" v-if="item.type == 3">
                  <div class="inTitle">互动动态</div>
                  <div class="inText">
                    <div v-if="item.content.type == 1">{{item.customer_name}} 评论了 &nbsp {{item.staff_name}} 发布的[
                      "{{item.sop_name}}" ] 朋友圈</div>
                    <div v-if="item.content.type == 2">{{item.customer_name}} 点赞了 &nbsp {{item.staff_name}} 发布的[
                      "{{item.sop_name}}" ] 朋友圈</div>
                  </div>
                </div>
                <div class="inContext" v-if="item.type == 4">
                  <div class="inTitle">客户动态</div>
                  <div class="inText">
                    <div v-if="item.content.type == 1">
                      {{item.customer_name}}通过:
                      <span v-if="item.content.add_way == 0">未知来源</span>
                      <span v-if="item.content.add_way == 1">扫描二维码</span>
                      <span v-if="item.content.add_way == 2">搜索手机号</span>
                      <span v-if="item.content.add_way == 3">名片分享</span>
                      <span v-if="item.content.add_way == 4">群聊</span>
                      <span v-if="item.content.add_way == 5">手机通讯录</span>
                      <span v-if="item.content.add_way == 6">微信联系人</span>
                      <span v-if="item.content.add_way == 7">来自微信的添加好友申请</span>
                      <span v-if="item.content.add_way == 8">安装第三方应用时自动添加的客服人员</span>
                      <span v-if="item.content.add_way == 9">搜索邮箱</span>
                      <span v-if="item.content.add_way == 201">内部成员共享</span>
                      <span v-if="item.content.add_way == 202">管理员/负责人分配</span>
                      方式添加员工:{{item.staff_name}}
                    </div>
                    <div v-if="item.content.type == 2">
                      <div v-if="item.content.delete_type == 1">{{item.customer_name}} 删除 员工 {{item.staff_name}}</div>
                      <div v-if="item.content.delete_type == 2">{{item.staff_name}} 删除 客户 {{item.customer_name}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="w100 tac" v-else>
            暂无数据
          </div>
        </div>
      </div>
    </div>
    <div v-if="entry == 'group_chat_tools'">
      <div class="w100 todoList">
        <ul class="w100 tabs">
          <li class="tabItem" :class="checkeds == 4 ? 'active' : ''" @click="checkTab(4)"><span>群成员</span></li>
          <li class="tabItem" :class="checkeds == 2 ? 'active' : ''" @click="checkTab(2)"><span>群动态</span></li>
        </ul>
      </div>
      <div class="w100 list" :class="checkeds == 4 ? 'active' : ''" v-if="checkeds == 4">
        <table class="table" border="0">
          <thead>
            <th>基本信息</th>
            <th>入群时间</th>
            <th>入群方式</th>
          </thead>
          <tr v-for="item in userList" :key="item">
            <td align="left"><img :src="item.staff_avatar || item.customer_avatar" class="staff_avatar">{{ item.name }}
            </td>
            <td>{{ item.join_time }}</td>
            <td>
              <span v-if="item.join_scene == 0">未知来源</span>
              <span v-else-if="item.join_scene == 1">由成员邀请入群（直接邀请入群）</span>
              <span v-else-if="item.join_scene == 2">由成员邀请入群（通过邀请链接入群）</span>
              <span v-else-if="item.join_scene == 3">通过扫描群二维码入群</span>
            </td>

          </tr>
        </table>
      </div>
      <div class="w100 list" :class="checkeds == 2 ? 'active' : ''" v-if="checkeds == 2">
        <div class="w100 nTabs">
          <li :class="checkedes == '' ? 'active' : ''" @click="checkTabs('')"><span>全部动态</span></li>
          <li :class="checkedes == 1 ? 'active' : ''" @click="checkTabs(1)"><span>创建</span></li>
          <li :class="checkedes == 2 ? 'active' : ''" @click="checkTabs(2)"><span>加入</span></li>
          <li :class="checkedes == 3 ? 'active' : ''" @click="checkTabs(3)"><span>退群</span></li>
          <li :class="checkedes == 4 ? 'active' : ''" @click="checkTabs(4)"><span>解散</span></li>
          <li :class="checkedes == 5 ? 'active' : ''" @click="checkTabs(5)"><span>修改公告</span></li>
          <li :class="checkedes == 6 ? 'active' : ''" @click="checkTabs(6)"><span>修改群名</span></li>
          <li :class="checkedes == 7 ? 'active' : ''" @click="checkTabs(7)"><span>修改群主</span></li>
        </div>
        <div v-if="customerInfo.customerInfoList.length">
          <div v-for="(item,index) in customerInfo.customerInfoList" class="track_box">
            <div class="dayTime">
              <span v-if="index == 0 && transTime(0, item.create_time)">{{transTime(0, item.create_time)}}</span>
              <span
                v-if="index != 0 && transTime(customerInfo.customerInfoList[index - 1].create_time, item.create_time)">{{transTime(customerInfo.customerInfoList[index
                - 1].create_time, item.create_time)}}</span>
            </div>
            <div class="time">
              <span class="el-icon-paperclip"></span>
              <span>{{moment(item.create_time * 1000).format("HH:mm")}}</span>
            </div>
            <div class="context">
              <div class="inContext" v-if="item.type == 1">
                <div class="inTitle">创建</div>
                <div class="inText">
                  {{item.content.name}} 创建了群聊
                </div>
              </div>
              <div class="inContext" v-if="item.type == 2">
                <div class="inTitle">加入</div>
                <div class="inText">
                  {{item.content.join}} 加入了群聊
                </div>
              </div>
              <div class="inContext" v-if="item.type == 3">
                <div class="inTitle">退群</div>
                <div class="inText">
                  {{item.content.leave}} 退出了群聊
                </div>
              </div>
              <div class="inContext" v-if="item.type == 4">
                <div class="inTitle">解散</div>
                <div class="inText">
                  群聊解散
                </div>
              </div>
              <div class="inContext" v-if="item.type == 5">
                <div class="inTitle">公告</div>
                <div class="inText">
                  {{item.content.notice}}
                </div>
              </div>
              <div class="inContext" v-if="item.type == 6">
                <div class="inTitle">修改群名</div>
                <div class="inText">
                  群名修改为 [ "{{item.content.name}}" ]
                </div>
              </div>
              <div class="inContext" v-if="item.type == 7">
                <div class="inTitle">修改群主</div>
                <div class="inText">
                  群主修改为 {{item.content.name}}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="w100 tac" v-else>
          暂无数据
        </div>
      </div>
    </div>
  </div>
  <script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
  <script src="//open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
  <script src="//jzt-scrm.oss-cn-shanghai.aliyuncs.com/assets/js/vue.min.js"></script>
  <script src="//jzt-scrm.oss-cn-shanghai.aliyuncs.com/assets/js/axios.min.js"></script>
  <script src="//jzt-scrm.oss-cn-shanghai.aliyuncs.com/assets/js/moment.js"></script>
  <script src="//jzt-scrm.oss-cn-shanghai.aliyuncs.com/assets/js/zh-cn.js"></script>

  <script src="./js/md5.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        company_id: 0,
        code: 0,
        userId: 0, // 当前外部联系人ID
        chatId: 0, // 当前外部群的群聊ID
        checkeds: 4,
        checkedes: '',
        type: 0,
        customerInfo: {
          customer_id: 0,
          avatar: "https://jzt-scrm.oss-cn-shanghai.aliyuncs.com/assets/img_tx.png",
          name: "",
          tag: [],
          followList: [], // 跟进客服列表
          processList: [], // 跟进详情列表
          customerInfoList: [], // 动态列表
        },
        follows: false,
        followText: '', // 跟进内容
        page: 1,
        limit: 20,
        user_id: 0, // 当前员工ID
        entry: '', // 当前场景
        userList: [], //群成员
        customer_infos: {}, // 当前员工的客户信息
        customer_edit: {
          customname: '',
          mobile: '',
          sex: '男',
          age: '',
          amount: '',
          city: '',
          insurance: '2',
          accumulationfund: '2',
          house: '2',
          car: '2',
          businesslicense: '2',
          remark: ''
        },
        sync_info: false
      },
      created() {
        this.code = this.getUrlCode().code,
          this.company_id = this.getUrlCode().id;
        if (localStorage.getItem("user_id") != 'undefined' && localStorage.getItem("user_id")) {
          this.wxConfig();
        } else {
          if (this.company_id && this.code) {
            this.getmyId();
          } else {
            this.getAppid();
          }
        }
      },
      methods: {
        generateRandomNonce() {
          const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
          let result = '';

          for (let i = 0; i < 8; i++) {
            result += chars.charAt(Math.floor(Math.random() * chars.length));
          }
          return result;
        },
        push_sync() {
          let _this = this;
          let time = Math.floor(Date.now() / 1000),
              nonce = this.generateRandomNonce(),
              sign = SparkMD5.hash(this.company_id + time + 'push_sync'+ nonce);
          if (!_this.customer_edit.customname) {
            alert('请填写客户姓名');
            return false;
          }
          if (!_this.customer_edit.mobile) {
            alert('请填写客户手机号');
            return false;
          }
          if (!_this.customer_edit.age) {
            alert('请填写客户年龄');
            return false;
          }
          if (!_this.customer_edit.amount) {
            alert('请填写申请额度');
            return false;
          }
          if (!_this.customer_edit.remark) {
            alert('请填写客户备注');
            return false;
          }
          _this.customer_edit.company_id = _this.company_id || 0;
          _this.customer_edit.userid = localStorage.getItem("user_id");
          _this.customer_edit.external_userid = _this.userId;
          _this.customer_edit.time = time;
          _this.customer_edit.sign = sign;
          _this.customer_edit.nonce = nonce;
          
          axios
            .post("/api/customerProcess/push_sync", _this.customer_edit)
            .then(function (res) {
              alert(res.data.msg);
              if (res.data.status) {
                location.reload();
              }
            }).catch(error => {
              if (error.response) {
                alert(`服务器错误: ${error.response.status}`);
              } else if (error.request) {
                alert(`网络错误`);
              } else {
                alert('请求错误', error.message);
              }
            });
        },
        getUrlCode() {
          // 截取url中的code方法
          var url = location.search;
          var theRequest = new Object();
          if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            var strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
              theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
            }
          }
          return theRequest;
        },
        // 获取appid
        getAppid() {
          let _this = this;
          let time = Math.floor(Date.now() / 1000),
              nonce = this.generateRandomNonce(),
              sign = SparkMD5.hash(this.company_id + time + 'appId'+ nonce);
          axios
            .post("/api/wxContent/appId", { company_id: this.company_id, time, sign , nonce})
            .then(function (result) {
              _this.getCode(result.data.data.corpid);
            });
          return false;
        },
        // 获取code
        getCode(appid) {
          var host = window.location.protocol + "//" + window.location.host;
          var url = encodeURI(host + "/chat-tool/detail.html?id=" + this.company_id);
          var href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${url}&response_type=code&scope=snsapi_base&state=#wechat_redirect`;
          window.location.href = href;
        },
        // 验证API
        wxConfig() {
          let _this = this;
          axios
            .post("/api/wxContent/jsSdkData", { company_id: this.company_id })
            .then(function (result) {
              wx.config({
                beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: result.data.data.appId, // 必填，企业微信的corpID
                timestamp: result.data.data.timestamp, // 必填，生成签名的时间戳
                nonceStr: result.data.data.nonceStr, // 必填，生成签名的随机串
                signature: result.data.data.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
                jsApiList: ["checkJsApi", "getContext", "getCurExternalContact", "getCurExternalChat", "openUserProfile"], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
              });
              wx.ready(function () {
                // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
                _this.getUserId(result.data.data.agent)
              });
            });
        },
        // 获取当前外部联系人userid
        getUserId(config) {
          let _this = this;
          wx.agentConfig({
            corpid: config.corpid, // 必填，企业微信的corpid，必须与当前登录的企业一致
            agentid: config.agentid, // 必填，企业微信的应用id （e.g. 1000247）
            timestamp: config.timestamp, // 必填，生成签名的时间戳
            nonceStr: config.nonceStr, // 必填，生成签名的随机串
            signature: config.signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
            jsApiList: ["checkJsApi", "getContext", "getCurExternalContact", "getCurExternalChat", "openUserProfile"], //必填
            success: function (res2) {
              wx.invoke('getContext', {}, function (res) {
                if (res.err_msg == "getContext:ok") {
                  _this.entry = res.entry;
                  if (res.entry == 'single_chat_tools') {  // 从单聊会话的工具栏进入
                    wx.invoke('getCurExternalContact', {
                    }, function (res) {
                      if (res.err_msg == "getCurExternalContact:ok") {
                        _this.userId = res.userId; //返回当前外部联系人userId
                        _this.getContent({});
                      }
                    });
                  } else if (res.entry == 'group_chat_tools') { // 	从群聊会话的工具栏进入
                    wx.invoke('getCurExternalChat', {}, function (res) {
                      if (res.err_msg == "getCurExternalChat:ok") {
                        _this.chatId = res.chatId; //返回当前外部群的群聊ID
                        _this.getUserList();
                      }
                    });
                  }
                }
              });

            },
            fail: function (err) {
              if (res.errMsg.indexOf('function not exist') > -1) {
                alert('版本过低请升级')
              }
            },
          });

        },
        //  / 获取当前群成员
        getUserList() {
          let _this = this;
          axios
            .post("/api/room/userList", {
              company_id: this.company_id,
              room_id: this.chatId,
            })
            .then(function (res) {
              _this.userList = res.data.data.list;
            });
        },
        // 获取当前员工userID
        getmyId() {
          let _this = this;
          axios
            .post("/api/user", {
              company_id: this.company_id,
              code: this.code,
            })
            .then(function (result) {
              if (result.status) {
                localStorage.setItem("user_id", result.data.data.userid);
                _this.wxConfig();
              }
            });
        },
        //获取详情
        getContent(datas) {
          let _this = this;
          let time = Math.floor(Date.now() / 1000),
              nonce = this.generateRandomNonce(),
              sign = SparkMD5.hash(this.company_id + time + 'detail'+ nonce);
          axios
            .post("/api/Customer/detail", { company_id: this.company_id, id: this.userId, time, sign , nonce})
            .then(function (result) {
              result = result.data.data;
              _this.customerInfo.customer_id = result.info.customer_id;
              _this.customerInfo.avatar = result.info.avatar;
              _this.customerInfo.name = result.info.name;
              _this.customerInfo.tag = result.info.tag;
              _this.customerInfo.type = result.info.type;
              _this.customerInfo.corp_name = result.info.corp_name;
              _this.customerInfo.follow_code_name = result.info.follow_code_name;
              _this.sync_info = Boolean(result.info.sync_info.customname);
              _this.customerInfo.followList = result.follow;
              _this.customer_infos = result.follow;

              _this.customer_edit = result.info.sync_info || {};

            })
        },
        // 打开客户详情
        addTag() {
          let _this = this;
          wx.invoke('openUserProfile', {
            "type": 2,
            "userid": _this.userId
          }, function (res) {
            if (res.err_msg != "openUserProfile:ok") {
              //错误处理                
            }
          });
        },
        // 切换
        checkTab(check) {
          this.checkeds = check;
          let _this = this,
            data = {
              company_id: this.company_id,
              page: this.page,
              limit: this.limit,
              search: {},
            };
          if (_this.entry == 'single_chat_tools') {//单聊
            if (check == 2) {
              data.search = {
                customer_id: this.customerInfo.customer_id,
                type: 2
              };
              axios.post("/api/Customer/trackList", data).then(function (result) {
                _this.customerInfo.processList = result.data.data.list;
              });
            } else if (check == 3) {
              data.search = {
                customer_id: this.customerInfo.customer_id,
                type: ''
              };
              axios.post("/api/Customer/trackList", data).then(function (result) {
                _this.customerInfo.customerInfoList = result.data.data.list;
              });
            }
          } else if (_this.entry == 'group_chat_tools') {// 群聊
            if (check == 2) {
              data.search = {
                room_id: _this.chatId,
                type: ''
              };
              axios.post("/api/room/trackList", data).then(function (result) {
                _this.customerInfo.customerInfoList = result.data.data.list;
              });
            }
          }

        },
        checkTabs(check) {
          this.checkedes = check;
          let _this = this,
            data = {
              company_id: this.company_id,
              page: this.page,
              limit: this.limit,
              search: {},
            };
          if (_this.entry == 'single_chat_tools') { //单聊
            data.search = {
              customer_id: _this.customerInfo.customer_id,
              type: check
            };
            axios.post("/api/Customer/trackList", data).then(function (result) {
              _this.customerInfo.customerInfoList = result.data.data.list;
            });
          } else if (_this.entry == 'group_chat_tools') { // 群聊
            data.search = {
              room_id: _this.chatId,
              type: check
            };
            axios.post("/api/room/trackList", data).then(function (result) {
              _this.customerInfo.customerInfoList = result.data.data.list;
            });
          }

        },
        // 添加跟进
        addFollow() {
          let _this = this,
            data = {
              company_id: this.company_id,
              content: this.followText,
              external_userid: this.userId,
              userid: localStorage.getItem("user_id")
            };
          axios.post("/api/customerProcess/add", data).then(function (result) {
            _this.follows = false;
            _this.followText = "";
            _this.checkTab(2);
          });
        },
        // 转时间
        transTime(oldvalue, newvalue) {
          moment.locale('zh-cn');
          oldvalue = oldvalue * 1000;
          newvalue = newvalue * 1000;
          if (oldvalue == 0) {
            return moment(newvalue).format("M月DD日 YYYY,dddd");
          } else if (moment(newvalue).isSame(oldvalue, 'day')) {
            return moment(newvalue).format("M月DD日 YYYY,dddd");
          }
        },
      },
    });
  </script>

  <style>
    .customer_content {
      overflow: hidden;
    }

    .customer_content li {
      overflow: hidden;
      padding-bottom: 10px;
      font-size: 14px;
    }

    .customer_content li span {
      width: 27%;
      float: left;
      padding: 5px 0;
      text-align: right;
      font-size: 14px;
    }

    .customer_content li .w70 {
      width: 70%;
      float: right;
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 3px;
      font-size: 14px;
    }

    .j_textarea {
      width: 85%;
      border-radius: 3px;
      padding: 5px;
      border: 1px solid #ccc;
      float: right;
    }

    .t_btn {
      width: 50%;
      background: #6881ec !important;
      color: #fff !important;
      cursor: pointer;
      border-radius: 5px;
      padding: 10px;
      border: none;
      display: block;
      float: right;
      font-size: 14px;
    }

    .w_btn {
      background: #6881ec !important;
      color: #fff !important;
      cursor: pointer;
      border-radius: 5px;
      padding: 10px;
      border: none;
      font-size: 14px;
    }

    .w50 {
      width: 50%;
      float: left;
      font-size: 14px;
    }

    .customer_content li .w135 {
      width: 13.2%;
      float: left;
      font-size: 14px;
    }

    .w100 {
      width: 100%;
      overflow: hidden;
    }

    .customer_show {
      width: 100%;
      overflow: hidden;
      padding: 10px;
    }

    .p10 {
      padding: 10px 0;
      overflow: hidden;
      border-bottom: 1px solid #eee;
    }

    .customer_info {
      font-size: 14px;
    }

    .customer_info img {
      width: 40px;
      height: 40px;
      border-radius: 3px;
      float: left;
    }

    .customer_info p {
      float: left;
      padding: 0 10px;
      line-height: 1.8;
    }

    .customer_label {
      display: flex;
    }

    .customer_label ul li {
      float: left;
      font-size: 13px;
      padding: 5px 10px;
      background: #eee;
      color: #333;
      border-radius: 2px;
      margin-right: 10px;
      margin-bottom: 5px;
    }

    .j_title {
      width: 100%;
      overflow: hidden;
      font-size: 14px;
      padding-bottom: 10px;
    }

    .table {
      width: 100%;
      font-size: 12px;
      text-align: center;
      border: 1px solid #f2f2f2;
      border-collapse: collapse;
    }

    .table th {
      padding: 10px;
      background-color: #f9f9f9;
    }

    .table td {
      width: 25%;
      padding: 10px 0;
    }

    .blue_btn {
      background: #6881ec !important;
      color: #fff !important;
      cursor: pointer;
    }

    .track_box {
      width: 420px;
      font-size: 13px;
    }

    .track_box .context {
      width: 100%;
      border-left: 1px dashed #b4b9c3;
      margin-left: 7px;
      padding-left: 20px;
      padding-bottom: 14px;
    }

    .track_box .context .inContext {
      width: 70%;
      background-color: #f6fbfe;
      padding: 16px 20px;
      border: 1px solid #d0e8ff;
      border-radius: 3px;
    }

    .track_box .context .inContext .inTitle {
      font-weight: bold;
      margin-bottom: 8px;
    }

    .track_box .dayTime {
      font-weight: bold;
      margin: 8px 0;
    }

    .track_box .time {
      padding-left: 12px;
      color: #aeb4bf;
    }



    .follow_btn button {
      float: right;
      font-size: 12px;
      width: 70px;
      background: #6881ec;
      padding: 10px;
      color: #fff;
      border-radius: 2px;
      margin-left: 20px;
      margin-top: 10px;
      border: none;
    }

    .nTabs {
      margin-bottom: 20px;
    }

    .nTabs li {
      width: 25%;
      float: left;
      text-align: center;
      padding: 5px;
    }

    .nTabs li span {
      border: 1px solid #ccc;
      border-radius: 20px;
      padding: 5px 0;
      display: block;
      font-size: 12px;
    }

    .nTabs li.active span {
      border: 1px solid #6881ec;
      background: #6881ec;
      color: #fff;
    }

    .isShow {
      width: 100vw;
      height: 100vh;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 100;
      background: rgba(0, 0, 0, .5);
    }

    .tac {
      text-align: center;
    }

    .staff_avatar {
      width: 20px;
      height: 20px;
      float: left;
      margin: 0 10px;
      border-radius: 100%;
    }

    .customer_info_l {
      overflow: hidden;
    }

    .customer_info_r {
      overflow: hidden;
      padding: 10px 0;
    }

    .c_mark {
      color: rgb(94, 199, 93);
      display: block;
      width: 95px;
    }

    .cr_text {
      color: #333;
      line-height: 2;
      overflow: hidden;

    }

    .cr_text span {
      width: 50%;
    }

    .cr_text span:nth-child(1) {
      color: rgb(94, 199, 93);
      text-align: right;
      padding-right: 5px;
    }


    @media (max-width: 370px) {
      .customer_content li span {
        width: 35%;
      }

      .customer_content li .w70 {
        width: 62%;
      }

      .customer_content li .w135 {
        width: 17%;
      }

      .j_textarea {
        width: 80%;
      }
    }
  </style>
</body>

</html>